<script setup lang="ts">
import axios from 'axios';
import { ref, watch } from 'vue';
import { ArticleItem, ArticleResData} from '../types/data'
// 引入 channel仓库
import { useChannelStore } from '../stores/channel'
const store = useChannelStore()
// const props = defineProps<{
//   channelId: number
// }>()

// 定义articlelist数据
const articles = ref<ArticleItem[]>([])
// 当channelId变化的时候调接口看一下数据
// 监听props里的数据也需要箭头函数返回
// axios的使用方式
// axios.get()  axios.post()       
// axios.request({url: 'xxx', method: 'post'})
// axios()
watch(() => store.channelId, async () => {
  const res = await axios.get<ArticleResData>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: store.channelId,
          timestamp: Date.now(),
        },
      }
    );
  console.log('res', res)
  articles.value = res.data.data.results
}, {
  immediate: true
})

</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{item.title}}</p>
      <img class="img" v-for="(src, i) in item.cover.images" :src="src" alt="">
      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>
